<template>
  <div>
    <div style="margin-bottom: 16px;">
      <a-select
        v-model="selectedDepartment"
        style="width: 200px; margin-right: 16px;"
        placeholder="请选择开课部门"
      >
        <a-select-option value="all">全部部门</a-select-option>
        <a-select-option value="math">机电工程系</a-select-option>
        <a-select-option value="physics">建筑工程系</a-select-option>
        <a-select-option value="computer">信息工程系</a-select-option>
        <a-select-option value="foreign">机电工程系</a-select-option>
      </a-select>
      
      <a-button type="primary" @click="showBindModal">
        <a-icon type="plus" /> 绑定指标
      </a-button>
      <a-divider type="vertical" />
      <a-button @click="resetDepartmentIndicators">
        <a-icon type="reload" /> 重置为默认
      </a-button>
    </div>

    <a-table
      :columns="columns"
      :dataSource="filteredData"
      rowKey="id"
      :pagination="false"
    >
      <template slot="category" slot-scope="text">
        <a-tag color="blue">{{text}}</a-tag>
      </template>
      <template slot="weight" slot-scope="text, record">
        <a-input-number
          v-model="record.weight"
          :min="0"
          :max="100"
          :step="1"
          style="width: 80px"
        />
      </template>
      <template slot="action" slot-scope="text, record">
        <a-button type="link" size="small" @click="unbindIndicator(record)">解绑</a-button>
      </template>
    </a-table>

    <a-modal
      title="绑定指标"
      :visible="bindModalVisible"
      @ok="handleBindOk"
      @cancel="handleBindCancel"
      :width="800"
    >
      <div style="margin-bottom: 16px;">
        <a-input-search
          placeholder="请输入指标名称搜索"
          style="width: 300px;"
          @search="onSearchIndicator"
        />
      </div>
      
      <a-table
        :columns="indicatorColumns"
        :dataSource="indicatorData"
        rowKey="id"
        :pagination="false"
        :rowSelection="{selectedRowKeys: selectedIndicatorKeys, onChange: onSelectChange}"
      >
        <template slot="category" slot-scope="text">
          <a-tag color="blue">{{text}}</a-tag>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '指标编号',
          dataIndex: 'code',
          key: 'code',
          width: 100
        },
        {
          title: '指标名称',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '指标分类',
          dataIndex: 'category',
          key: 'category',
          scopedSlots: { customRender: 'category' },
          width: 120
        },
        {
          title: '权重(%)',
          dataIndex: 'weight',
          key: 'weight',
          scopedSlots: { customRender: 'weight' },
          width: 120
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          width: 100
        }
      ],
      data: [
        {
          id: '1',
          code: 'T001',
          name: '教学态度认真负责',
          category: '教学态度',
          weight: 20,
          department: 'math'
        },
        {
          id: '2',
          code: 'T002',
          name: '教学内容充实',
          category: '教学内容',
          weight: 25,
          department: 'math'
        },
        {
          id: '3',
          code: 'T003',
          name: '教学方法得当',
          category: '教学方法',
          weight: 25,
          department: 'physics'
        },
        {
          id: '4',
          code: 'T004',
          name: '教学效果良好',
          category: '教学效果',
          weight: 30,
          department: 'computer'
        }
      ],
      indicatorColumns: [
        {
          title: '指标编号',
          dataIndex: 'code',
          key: 'code',
          width: 100
        },
        {
          title: '指标名称',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '指标分类',
          dataIndex: 'category',
          key: 'category',
          scopedSlots: { customRender: 'category' },
          width: 120
        }
      ],
      indicatorData: [
        {
          id: 'i1',
          code: 'T005',
          name: '课堂互动良好',
          category: '教学方法'
        },
        {
          id: 'i2',
          code: 'T006',
          name: '作业批改认真',
          category: '教学态度'
        },
        {
          id: 'i3',
          code: 'T007',
          name: '理论与实践结合',
          category: '教学内容'
        },
        {
          id: 'i4',
          code: 'T008',
          name: '学生能力提升明显',
          category: '教学效果'
        }
      ],
      selectedDepartment: 'all',
      bindModalVisible: false,
      selectedIndicatorKeys: []
    }
  },
  computed: {
    filteredData() {
      if (this.selectedDepartment === 'all') {
        return this.data
      }
      return this.data.filter(item => item.department === this.selectedDepartment)
    }
  },
  methods: {
    showBindModal() {
      if (this.selectedDepartment === 'all') {
        this.$message.warning('请先选择具体部门')
        return
      }
      this.bindModalVisible = true
      this.selectedIndicatorKeys = []
    },
    resetDepartmentIndicators() {
      if (this.selectedDepartment === 'all') {
        this.$message.warning('请先选择具体部门')
        return
      }
      this.$confirm({
        title: '确认重置',
        content: '确定要将该部门的指标重置为默认设置吗？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.$message.success('已重置为默认指标设置')
        }
      })
    },
    unbindIndicator(record) {
      this.$confirm({
        title: '确认解绑',
        content: `确定要解绑指标"${record.name}"吗？`,
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.data = this.data.filter(item => item.id !== record.id)
          this.$message.success('解绑成功')
        }
      })
    },
    handleBindOk() {
      if (this.selectedIndicatorKeys.length === 0) {
        this.$message.warning('请至少选择一个指标')
        return
      }
      
      const selectedIndicators = this.indicatorData.filter( item => this.selectedIndicatorKeys.includes(item.id));
      
      selectedIndicators.forEach(indicator => {
        if (!this.data.some(item => item.id === indicator.id)) {
          this.data.push({
            ...indicator,
            weight: 0,
            department: this.selectedDepartment
          })
        }
      })
      
      this.$message.success('绑定成功');
      this.bindModalVisible = false;
    },
    handleBindCancel() {
      this.bindModalVisible = false
    },
    onSearchIndicator(value) {
      console.log('搜索指标:', value)
      // 这里应该实现指标搜索功能
    },
    onSelectChange(selectedRowKeys) {
      this.selectedIndicatorKeys = selectedRowKeys
    }
  }
}
</script>